<template>
  <div class="xueliang-detail">
    <descriptions
      :columns="[
        { label: '名称', key: 'monitor_name' },
        { label: '经度', key: 'longitude' },
        { label: '纬度', key: 'latitude' },
        { label: '地址', key: 'address' },
      ]"
      :data-source="videoDetails"
      :col-span="24"
    />
    <div style="text-align: center; margin-top: 10px">
      <a-button type="primary" @click="openVideo" v-if="!isEmpty(videoDetails)">查看视频</a-button>
    </div>
  </div>
</template>

<script>
import isEmpty from 'lodash-es/isEmpty.js';
import { plentyEngineeringDetail } from '@gis/lib/api';
import { dialog } from '@gis/lib/components/antd-dialog';

export default {
  name: 'xueliang-detail',
  props: {
    detail: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      videoDetails: {},
    };
  },
  created() {
    this.getVideoDetails();
  },
  methods: {
    isEmpty,
    async getVideoDetails() {
      const { data = {} } = await plentyEngineeringDetail({
        monitor_id: this.detail.id,
      });
      this.videoDetails = data;
    },
    async openVideo() {
      if (isEmpty(this.videoDetails)) {
        return this.$message.error('未获取到视频详细信息');
      }
      // 页面左右两侧面板 - 监控关闭
      this.$vbus.$emit('pageVideoShow', false);
      // setTimeout - 解决弹窗里面播放器 - 不播放
      setTimeout(() => {
        dialog({
          content: () => import('@gis/lib/components/player/index.jsx'),
          contentProps: {
            data: this.videoDetails,
          },
          dialogProps: {
            title: '监控',
            width: 'medium',
            height: 'fixed',
            footer: null,
            onCancel: () => {
              this.$vbus.$emit('pageVideoShow', true);
            },
          },
        });
      }, 500);
    },
  },
};
</script>

<style scoped lang="less">
.xueliang-detail {
}
</style>
